<template>
	<view class="uni-flex uni-flex-item uni-column">
		<view class="uni-list" v-if="countAll>0">
			<block v-for="(item,index) in cartList" :key="index">
				<checkbox-group @change="checkboxChange" :data-index="index">
					<view class="uni-list-cell">
						<view class="uni-media-list">
							<view class="uni-media-list-checkbox">
								<checkbox :checked="item.checked" />
							</view>
							<image class="uni-media-list-logo" :src="item.value.img"></image>
							<view class="uni-media-list-body">
								<view class="uni-media-list-text-top uni-ellipsis-2">{{item.value.title}}</view>
								<view class="uni-media-list-text-middle">
									<text class="uni-h5"></text>
								</view>
								<view class="uni-media-list-text-bottom">
									<view class="uni-flex uni-flex-item uni-row">
										<view class="uni-flex-item">
											<text class="uni-h4 uni-text-red">￥{{item.value.price/100}}</text>
											<text>&nbsp;&nbsp;</text>
											<text class="uni-h6">￥{{item.value.origin_price/100}}</text>
										</view>
										<view>
											<view class="uni-numbox">
												<view class="uni-numbox-minus" @click="handleCount(index,-1)">-</view>
												<input class="uni-numbox-value" type="number" v-model="item.count" disabled>
												<view class="uni-numbox-plus" @click="handleCount(index,1)">+</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</checkbox-group>
			</block>
		</view>
		<view v-if="countAll >0" style="justify-content: flex-end; margin: 20px;">
			<text class="uni-h5" style="float: right;">共{{countAll}}件，合计：￥{{costAll/100}}</text>
		</view>
		<view v-if="countAll >0">
			<button style="width: 90%;" type="primary" @click="buy">去结算</button>
		</view>

		<view v-if="countAll ==0" class="uni-flex uni-flex-item uni-column" style="justify-content: center;align-items: center;">
			<text>购物车啥都没有！</text>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			handleCount(index, count) {
				if (count < 0 && this.cartList[index].count === 1) {
					let that = this;
					uni.showModal({
						title: '提示',
						content: '确认要从购物车中删除该项目吗？',
						success: function (res) {
							if (res.confirm) {
								// console.log('用户点击确定');
								that.$store.commit('deleteCart', that.cartList[index].product_id);
								return;
							} else if (res.cancel) {
								// console.log('用户点击取消');
								return;
							}
						}
					});
				} else {
					this.$store.commit('editCartCount', {
						product_id: this.cartList[index].product_id,
						count: count,
					});
				}
			},
			checkboxChange: function (e) {
				console.log(JSON.stringify(e.target))
				const index = e.target.dataset.index;
				this.$store.commit('editCartItemStatus', {
					product_id: this.cartList[index].product_id
				});
			},
			buy() {
				uni.navigateTo({
					url: `request-payment?amount=${this.costAll}`
				})
			}
		},
		computed: {
			cartList() {
				return this.$store.state.cartList;
			},
			countAll() {
				let count = 0;
				this.cartList.forEach(item => {
					if (item.checked) {
						count += item.count;
					}
				});
				return count;
			},
			costAll() {
				let cost = 0;
				this.cartList.forEach(item => {
					if (item.checked) {
						cost += item.count * item.value.price;
					}
				});
				return cost;
			}
		}
	}
</script>

<style>
	.container {
		padding: 22px 30px 22px 30px;
	}

	.uni-media-list-checkbox {
		display: flex;
		align-items: center;
	}

	.uni-media-list-logo {
		height: 150px;
		width: 150px;
		margin-right: 20px;
	}

	.uni-media-list-body {
		height: 150px;
		/* 		display: flex;
		flex: 1;
		flex-direction: column; */
		align-items: flex-start;
	}

	.uni-media-list-text-top {
		font-size: 28px;
	}

	.uni-media-list-text-middle {
		font-size: 24px;
	}

	.uni-media-list-text-bottom {
		font-size: 20px;
		color: #8f8f94;
	}

	.uni-numbox {
		display: flex;
		flex-direction: row;
		height: 50px;
	}

	.uni-numbox-minus,
	.uni-numbox-plus {
		margin: 0;
		background-color: #f9f9f9;
		width: 50px;
		line-height: 50px;
		justify-content: center;
		color: #555555;
		font-size: 24px;
		border: 0px;
	}

	.uni-numbox-value {
		border: 0px;
		width: 100px;
		font-size: 24px;
		text-align: center;
	}

	.uni-numbox-disabled {
		color: #c0c0c0;
	}
</style>
